<template>
    <div>
        <div class="header">
            <h3>课 件 上 传</h3>
            <div class="ppt">
                <el-select v-model="classId" placeholder="请选择">
                    <el-option v-for="(item,index) in classes" :key="index" :label="item.className"
                        :value="item.id"></el-option>
                </el-select>
                <el-button type="success" @click="dialogVisible = true">上传课件</el-button>
            </div>
        </div>

        <!-- 添加课件的对话框 -->
        <el-dialog title="添加课件" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">


            <el-upload action="/upload" :on-success="handleSuccess" :before-upload="beforeUpload">
                <p>
                    为
                    <span v-if="classId != null"> {{ (classes.find(item => item.id === classId)).className }} </span>
                    添加课件
                </p>
                <div>
                    <el-select v-model="otherParam" placeholder="请选择章节">
                        <el-option v-for="item in chapters" :key="item.id"
                            :label="item.chapterNumber + item.description" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button slot="trigger" type="primary">选择文件</el-button>
                </div>
                <div slot="tip" class="el-upload__tip">只能上传ppt文件，且不超过20MB</div>
                <div>
                    <span> {{ fileName }}</span> <!-- 显示文件名 -->
                </div>
            </el-upload>


            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="UploadFile">确 定</el-button>
            </span>
        </el-dialog>


        <div class="boby">
            <!-- 原始表达 -->
            <div v-for="(item,index) in PPTs" :key="index" class="item">
                <span v-if="item.length>0" class="chapter"> {{ chapters.find(item=>item.id === index + 1).chapterNumber}}: {{
                    chapters.find(item=>item.id ===
                    index + 1).description}}</span>
                <div class="item1">
                    <div v-for="(item1,index1) in item" :key="index1">
                        <el-row>
                            <el-col :span="12">
                                <el-link :underline="false" type="primary"
                                    :href="`http://127.0.0.1:8000/teacher/ppt/getPPTById?id=${item1.id}`">{{item1.pptName}}
                                </el-link>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="danger" size="small" @click="deleteppt(item1.id)">删除</el-button>
                            </el-col>
                            <hr>
                        </el-row>
                    </div>
                </div>
            </div>

            <!-- <el-table :data="PPTs" style="width: 100%" class="pptview">
                
                <el-table-column label="章节信息" width="700px">
                    <template slot-scope="scope">
                        <span> {{ chapters.find(item=>item.id === scope.row[0].chapterId).chapterNumber}}: {{
                            chapters.find(item=>item.id ===
                            scope.row[0].chapterId).description}}</span>
                    </template>
                </el-table-column>

                <el-table-column type="expand" label="课件信息" width="100px">
                    <template slot-scope="props">
                        <el-card class="box-card">
                            <div v-for="(item02,index02) in props.row" :key="index02" class="pptCart">
                                <span>第{{index02+1}}个课件: </span>
                                <el-link :underline="false" type="primary"
                                    :href="`http://127.0.0.1:8000/teacher/ppt/getPPTById?id=${item02.id}`">{{item02.pptName}}
                                </el-link>
                                <el-button type="danger" size="small">删除{{item02.id}}</el-button>
                                <hr>
                            </div>
                        </el-card>
                    </template>
                </el-table-column>

                <el-table-column label="课件数量">
                    <template slot-scope="scope">
                        <span> {{scope.row.length}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="基本信息" width="500px">
                    <template slot-scope="scope">
                        <span> {{scope.row}}</span>
                    </template>
                </el-table-column>
            </el-table> -->

        </div>
    </div>
</template>

<script>
    export default {
        watch: {
            classId: function (newVal, oldVal) {
                this.getppts()
            },
        },
        created() {
            this.getChapter()
            this.getCalssList();
        },
        data() {
            return {
                classId: null,//班级id
                classes: [],//班级数据
                chapters: [],
                dialogVisible: false,
                file: null,// 存储文件对象
                otherParam: '',// 上传需要的参数
                fileName: '', // 用于存储文件名的数据属性 
                PPTs: null, // 课件信息 
            };
        },
        methods: {
            // 获取班级信息
            async getCalssList() {
                const { data: res } = await this.$axios.get("/getClasses")
                this.classes = res.data
                this.classId = res.id
            },

            // 获取章节信息
            async getChapter() {
                const { data: res } = await this.$axios.get("/chapter/getChapter")
                this.chapters = res.data
            },

            // 添加课件对话框关闭
            handleClose() {
                this.dialogVisible = false,
                    this.file = null,
                    this.otherParam = '',
                    this.fileName = ""
            },

            // 文件上传
            beforeUpload(file) {
                this.file = file;
                const fileName = file.name; // 获取文件名  
                const fileExtension = fileName.split('.').pop().toLowerCase(); // 获取文件后缀名，并转换为小写  
                this.fileName = fileName; // 更新文件名数据属性  
                return false; // 阻止文件上传，直到其他参数被添加到 Form 表单中。  
            },
            handleSuccess(response, file, fileList) {
                console.log("上传成功");
                // 处理上传成功后的逻辑  
            },

            // 发送请求
            async UploadFile() {
                if (this.file === null) {
                    return this.$message.error("请上传文件")
                }
                if (this.otherParam === '') {
                    return this.$message.error("请选择课件章节")
                }
                // 创建 FormData 对象并添加文件和参数  
                const formData = new FormData();
                formData.append('file', this.file);
                formData.append('chapterId', this.otherParam);
                formData.append('classId', this.classId);
                // 使用 axios 发送请求  
                const { data: res } = await this.$axios.post('/ppt/upload', formData)
                if (res.code === 200) {
                    this.handleClose()
                    this.getppts()
                    return this.$message.success("上传成功")
                } else {
                    return this.$message.error("网络错误")
                }
            },

            // 获取课件信息
            async getppts() {
                const { data: res } = await this.$axios.get("/ppt/getPPT", {
                    params: {
                        classId: this.classId
                    }
                })
                if (res.code === 200) {
                    this.PPT = null
                    return this.PPTs = res.data
                }
                this.$message.error("网络错误")

            },

            // 根据id删除对应的课件
            async deleteppt(id) {
                const { data: res } = await this.$axios.get("/ppt/deletePPT", {
                    params: {
                        id: id
                    }
                })
                if (res.code === 200) {
                    this.getppts()
                    return this.$message.success("删除课件成功")
                }
                this.$message.error("网络错误")

            },
        }
    }
</script>

<style lang="less" scoped>
    .header {
        h3 {
            text-align: center;
            font-size: 20px;
        }

        .ppt {
            padding-left: 40px;
            padding-right: 200px;
            padding-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border-bottom: 2px solid #000;
        }
    }

    .el-dialog {
        .el-upload {
            div {
                .el-select {
                    margin-bottom: 10px;
                    display: block;
                    width: 300px
                }
            }
        }
    }

    .boby {

        /* .pptview{
            margin-top: 20px;
            .pptCart{
                padding-left: 50px;
                padding-right: 50px;
                .el-button{
                    margin-left: 30px;
                }
            }
        } */
        .item {
            .chapter{
                margin-top: 10px;
                margin-left: 20px;
            }
            margin-left: 20px;
            background-color: #ffffff;
            margin-top: 10px;

            span {
                margin-left: 10px;
                font-size: 15px;
            }

            .item1 {
                .el-link {
                    margin-left: 22px;
                    font-size: 16px;
                    margin-bottom: 10px;
                }

                margin-bottom: 10px;
                .el-col{
                    height: 40px;
                }
            }
        }
    }
</style>